<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: 100%;
            border: 1px solid red;
        }

       li {
           list-style: none;
            border: 1px solid red;
        }
    </style>
</head>
<body>
   
<!--    
## 2.循环生成列表数据，然后使用js实现隔行变色
```javascript
    for(var i = 0;i < 10;i++){
        if(i % 2 === 0){
            li.style.backgroundColor = 'red';
        }else{
            li.style.backgroundColor = 'red';
        }
    } -->

    行：<input type="text" id="num1">
   
    <button id="btn">生成</button>
    <ul id="ul"></ul>
    <script>
         btn.onclick = function () {
            var n1 = num1.value;
            var res = '';
            for (var i = 0; i < n1; i++) {
                res += '<li>'+i+'</li>'
            }
            ul.innerHTML = res;
            var oLi = document.querySelectorAll('li')
            console.log(oLi)
            for(var j=0;j<oLi.length;j++){
                if(j % 2 === 0){
                    oLi[j].style.backgroundColor = 'red';
                }else{
                    oLi[j] .style.backgroundColor = 'blue';
                } 
            }
        }


    
    </script>





















</body>
</html>